<template>
  <div class="container">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="usernameOrPhone">用户名/手机号码</label>
        <input type="text" v-model="credentials.usernameOrPhone" class="form-control" id="usernameOrPhone" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="credentials.password" class="form-control" id="password" required>
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
      <p v-if="error" class="text-danger">{{ error }}</p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      credentials: {
        usernameOrPhone: '',
        password: ''
      },
      error: ''
    }
  },
  methods: {
    login() {
      // 调用后端登录接口，假设是 /api/login
      axios.post('/api/login', this.credentials)
      .then(response => {
          // 登录成功后的操作，比如保存用户信息到本地存储，跳转到首页等
          localStorage.setItem('userToken', response.data.token);
          this.$router.push('/home');
        })
      .catch(error => {
          this.error = '用户名或密码错误';
        });
    }
  }
}
</script>
<style scoped>
</style>